<template>
  <el-container>
    <div class="container">
      <el-row class="statis">
        <el-col :span="6">
          <el-statistic :value="vuesCnt">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                已完成练习
                <el-tooltip
                  effect="dark"
                  content="在src/views目录下完成vue组件开发，VUE练习本将自动将vue组件挂在菜单栏下。vue组件可以存放在子目录下，与组件同名、同目录的svg文件会作为菜单图标；同名的md文件会加载为组件说明。"
                  placement="top"
                >
                  <Icon width="32px" icon="material-symbols:help-outline" />
                </el-tooltip>
              </div>
            </template>
            <template #suffix>
              <Icon width="48px" icon="logos:vue" />
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="已制定目标" :value="todos.length">
            <template #suffix>
              <Icon width="48px" icon="tdesign:task-1" />
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="已完成目标" :value="finishedTodosCnt">
            <template #suffix>
              <Icon width="48px" icon="carbon:task" />
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic title="仍需努力" :value="unFinishedTodosCnt"
            >bx:task-x
            <template #suffix>
              <Icon width="48px" icon="bx:task-x" />
            </template>
          </el-statistic>
        </el-col>
      </el-row>
      <el-row style="" class="todos">
        <el-divider />
        <el-col :span="24">
          <el-form
            label-width="auto"
            :inline="true"
            style="max-width: 600px; min-width: 500px"
          >
            <el-form-item label="任务目标">
              <el-input
                v-model="todo"
                width="200px"
                style="width: 400px"
                placeholder="任务详细内容"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-scrollbar class="todo-items">
          <table>
            <tr v-for="(item, index) in todos">
              <td class="todo">
                <div
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                  "
                >
                  <el-checkbox
                    v-model="item.checked"
                    size="large"
                    style="padding-right: 10px"
                    @change="finished"
                  />
                  <el-text :type="item.checked ? 'success' : 'primary'">{{
                    item.title
                  }}</el-text>
                  <el-link :underline="false" @click="deleteTodo(index)">
                    <Close
                      style="
                        width: 1em;
                        height: 1em;
                        margin-right: 8px;
                        font-size: 12px;
                        color: red;
                      "
                      class="del"
                    />
                  </el-link>
                </div>
              </td>
            </tr>
          </table>
        </el-scrollbar>
      </el-row>
    </div>
  </el-container>
</template>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.statis {
  padding: 20px 20px 0 20px;
  width: 100%;

  .el-col {
    text-align: center;
  }
}

.el-statistic {
  --el-statistic-content-font-size: 48px;
  --el-statistic-title-font-size: 24px;
  --el-statistic-content-color: var(--el-color-primary-dark-2);
}

.custom-block.tip {
  margin-left: 20px;
  width: 100%;
  padding: 8px 16px;
  background-color: rgba(var(--el-color-primary-rgb), 0.1);
  border-radius: 4px;
  border-left: 5px solid var(--el-color-primary);
  margin: 20px px 0;
  text-align: left;
}

.custom-block .custom-block-title {
  font-weight: 700;
}

.form {
  width: 100%;
  padding: 20px;
}

.todos {
  text-align: left;
  /* margin: 20px; */
  padding: 0 20px 0 20px;
  /* border: 1px solid;
    border-color: var(--practice-backgroud-color); */

  .todo {
    font-size: var(--el-font-size-big);
    width: 100%;

    span {
      width: 100%;
    }

    .del {
      padding-left: 20px;
      display: none;
    }
  }

  .todo:hover .del {
    display: block;
  }

  .todo-items {
    height: calc(100vh - 380px);
    width: 100%;

    table {
      width: calc(100% - 15px);
      border-collapse: collapse;

      td {
        border: 1px solid var(--practice-backgroud-color);
        padding: 4px 28px;
      }

      tr:hover {
        background-color: #f0f8ff;
      }
    }
  }
}
</style>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { Icon } from "@iconify/vue";
import localforage from "localforage";
import { ElMessage, ElMessageBox } from "element-plus";
import { Close } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const allRoutes = router.getRoutes();

const vuesCnt = ref(allRoutes.length - 5);

const todo = ref("");

type todoType = {
  title: string;
  checked: boolean;
};

const todos = ref<todoType[]>([]);

const finishedTodosCnt = computed(() => {
  return todos.value.filter(item => item.checked).length; // 统计 checked 为 true 的任务数量
});

const unFinishedTodosCnt = computed(() => {
  return todos.value.length - finishedTodosCnt.value;
});

const sortTodos = () => {
  todos.value.sort((a, b) => {
    return Number(a.checked) - Number(b.checked); // 未完成的任务排在前面
  });
};

onMounted(async () => {
  const itemstr = await localforage.getItem<string>("practice-todos");
  if (itemstr) {
    const items = JSON.parse(itemstr);
    todos.value = todos.value.concat(items);
    sortTodos();
  } else {
    todos.value.push({
      title: "安装并启动Vue练习本",
      checked: true
    });
    todos.value.push({
      title: "完成1个简单的Vue练习",
      checked: false
    });
    sortTodos();
    await localforage.setItem("practice-todos", JSON.stringify(todos.value));
  }
});

const deleteTodo = async (i: number) => {
  const msg = "是否确认删除选定任务：" + todos.value[i].title + "?";
  ElMessageBox.confirm(msg, "确认", {
    confirmButtonText: "确认删除",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    todos.value.splice(i, 1);
    await localforage.setItem("practice-todos", JSON.stringify(todos.value));
    ElMessage({
      type: "success",
      message: "选定任务已删除。"
    });
  });
};

const finished = async () => {
  // sortTodos();
  await localforage.setItem("practice-todos", JSON.stringify(todos.value));
};

const onSubmit = async () => {
  if (todo.value !== "") {
    todos.value.splice(0, 0, { title: todo.value, checked: false });
    ElMessage({
      message: "任务:" + todo.value + "已添加。",
      type: "success"
    });
    todo.value = "";
    await localforage.setItem("practice-todos", JSON.stringify(todos.value));
  }
};
</script>
